﻿/*
 * jPicker 1.1.6
 *
 * jQuery Plugin for Photoshop style color picker
 *
 * Copyright (c) 2010 Christopher T. Tillman
 * Digital Magic Productions, Inc. (http://www.digitalmagicpro.com/)
 * MIT style license, FREE to use, alter, copy, sell, and especially ENHANCE
 *
 * Painstakingly ported from John Dyers' excellent work on his own color picker based on the Prototype framework.
 *
 * John Dyers' website: (http://johndyer.name)
 * Color Picker page:   (http://johndyer.name/post/2007/09/PhotoShop-like-JavaScript-Color-Picker.aspx)
 *
 */
        (function ($, version)
        {
            Math.precision = function (value, precision)
            {
                if (precision === undefined)
                    precision = 0;
                return Math.round(value * Math.pow(10, precision)) / Math.pow(10, precision);
            };
            var Slider = // encapsulate slider functionality for the ColorMap and ColorBar - could be useful to use a jQuery UI draggable for this with certain extensions
                    function (bar, options)
                    {
                        var $this = this, // private properties, methods, and events - keep these variables and classes invisible to outside code
                                arrow = bar.find('img:first'), // the arrow image to drag
                                minX = 0,
                                maxX = 100,
                                rangeX = 100,
                                minY = 0,
                                maxY = 100,
                                rangeY = 100,
                                x = 0,
                                y = 0,
                                offset,
                                timeout,
                                changeEvents = new Array(),
                                fireChangeEvents =
                                function (context)
                                {
                                    for (var i = 0; i < changeEvents.length; i++)
                                        changeEvents[i].call($this, $this, context);
                                },
                                mouseDown = // bind the mousedown to the bar not the arrow for quick snapping to the clicked location
                                function (e)
                                {
                                    var off = bar.offset();
                                    offset = {l: off.left | 0, t: off.top | 0};
                                    clearTimeout(timeout);
                                    timeout = setTimeout(// using setTimeout for visual updates - once the style is updated the browser will re-render internally allowing the next Javascript to run
                                            function ()
                                            {
                                                setValuesFromMousePosition.call($this, e);
                                            }, 0);
                                    // Bind mousemove and mouseup event to the document so it responds when dragged of of the bar - we will unbind these when on mouseup to save processing
                                    $(document).bind('mousemove', mouseMove).bind('mouseup', mouseUp);
                                    e.preventDefault(); // don't try to select anything or drag the image to the desktop
                                },
                                mouseMove = // set the values as the mouse moves
                                function (e)
                                {
                                    clearTimeout(timeout);
                                    timeout = setTimeout(
                                            function ()
                                            {
                                                setValuesFromMousePosition.call($this, e);
                                            }, 0);
                                    e.stopPropagation();
                                    e.preventDefault();
                                    return false;
                                },
                                mouseUp = // unbind the document events - they aren't needed when not dragging
                                function (e)
                                {
                                    $(document).unbind('mouseup', mouseUp).unbind('mousemove', mouseMove);
                                    e.stopPropagation();
                                    e.preventDefault();
                                    return false;
                                },
                                setValuesFromMousePosition = // calculate mouse position and set value within the current range
                                function (e)
                                {
                                    var locX = e.pageX - offset.l,
                                            locY = e.pageY - offset.t,
                                            barW = bar.w, // local copies for YUI compressor
                                            barH = bar.h;
                                    // keep the arrow within the bounds of the bar
                                    if (locX < 0)
                                        locX = 0;
                                    else if (locX > barW)
                                        locX = barW;
                                    if (locY < 0)
                                        locY = 0;
                                    else if (locY > barH)
                                        locY = barH;
                                    val.call($this, 'xy', {x: ((locX / barW) * rangeX) + minX, y: ((locY / barH) * rangeY) + minY});
                                },
                                draw =
                                function ()
                                {
                                    var arrowOffsetX = 0,
                                            arrowOffsetY = 0,
                                            barW = bar.w,
                                            barH = bar.h,
                                            arrowW = arrow.w,
                                            arrowH = arrow.h;
                                    setTimeout(
                                            function ()
                                            {
                                                if (rangeX > 0) // range is greater than zero
                                                {
                                                    // constrain to bounds
                                                    if (x == maxX)
                                                        arrowOffsetX = barW;
                                                    else
                                                        arrowOffsetX = ((x / rangeX) * barW) | 0;
                                                }
                                                if (rangeY > 0) // range is greater than zero
                                                {
                                                    // constrain to bounds
                                                    if (y == maxY)
                                                        arrowOffsetY = barH;
                                                    else
                                                        arrowOffsetY = ((y / rangeY) * barH) | 0;
                                                }
                                                // if arrow width is greater than bar width, center arrow and prevent horizontal dragging
                                                if (arrowW >= barW)
                                                    arrowOffsetX = (barW >> 1) - (arrowW >> 1); // number >> 1 - superfast bitwise divide by two and truncate (move bits over one bit discarding lowest)
                                                else
                                                    arrowOffsetX -= arrowW >> 1;
                                                // if arrow height is greater than bar height, center arrow and prevent vertical dragging
                                                if (arrowH >= barH)
                                                    arrowOffsetY = (barH >> 1) - (arrowH >> 1);
                                                else
                                                    arrowOffsetY -= arrowH >> 1;
                                                // set the arrow position based on these offsets
                                                arrow.css({left: arrowOffsetX + 'px', top: arrowOffsetY + 'px'});
                                            }, 0);
                                },
                                val =
                                function (name, value, context)
                                {
                                    var set = value !== undefined;
                                    if (!set)
                                    {
                                        if (name === undefined || name == null)
                                            name = 'xy';
                                        switch (name.toLowerCase())
                                        {
                                            case 'x':
                                                return x;
                                            case 'y':
                                                return y;
                                            case 'xy':
                                            default:
                                                return {x: x, y: y};
                                        }
                                    }
                                    if (context != null && context == $this)
                                        return;
                                    var changed = false,
                                            newX,
                                            newY;
                                    if (name == null)
                                        name = 'xy';
                                    switch (name.toLowerCase())
                                    {
                                        case 'x':
                                            newX = value && (value.x && value.x | 0 || value | 0) || 0;
                                            break;
                                        case 'y':
                                            newY = value && (value.y && value.y | 0 || value | 0) || 0;
                                            break;
                                        case 'xy':
                                        default:
                                            newX = value && value.x && value.x | 0 || 0;
                                            newY = value && value.y && value.y | 0 || 0;
                                            break;
                                    }
                                    if (newX != null)
                                    {
                                        if (newX < minX)
                                            newX = minX;
                                        else if (newX > maxX)
                                            newX = maxX;
                                        if (x != newX)
                                        {
                                            x = newX;
                                            changed = true;
                                        }
                                    }
                                    if (newY != null)
                                    {
                                        if (newY < minY)
                                            newY = minY;
                                        else if (newY > maxY)
                                            newY = maxY;
                                        if (y != newY)
                                        {
                                            y = newY;
                                            changed = true;
                                        }
                                    }
                                    changed && fireChangeEvents.call($this, context || $this);
                                },
                                range =
                                function (name, value)
                                {
                                    var set = value !== undefined;
                                    if (!set)
                                    {
                                        if (name === undefined || name == null)
                                            name = 'all';
                                        switch (name.toLowerCase())
                                        {
                                            case 'minx':
                                                return minX;
                                            case 'maxx':
                                                return maxX;
                                            case 'rangex':
                                                return {minX: minX, maxX: maxX, rangeX: rangeX};
                                            case 'miny':
                                                return minY;
                                            case 'maxy':
                                                return maxY;
                                            case 'rangey':
                                                return {minY: minY, maxY: maxY, rangeY: rangeY};
                                            case 'all':
                                            default:
                                                return {minX: minX, maxX: maxX, rangeX: rangeX, minY: minY, maxY: maxY, rangeY: rangeY};
                                        }
                                    }
                                    var changed = false,
                                            newMinX,
                                            newMaxX,
                                            newMinY,
                                            newMaxY;
                                    if (name == null)
                                        name = 'all';
                                    switch (name.toLowerCase())
                                    {
                                        case 'minx':
                                            newMinX = value && (value.minX && value.minX | 0 || value | 0) || 0;
                                            break;
                                        case 'maxx':
                                            newMaxX = value && (value.maxX && value.maxX | 0 || value | 0) || 0;
                                            break;
                                        case 'rangex':
                                            newMinX = value && value.minX && value.minX | 0 || 0;
                                            newMaxX = value && value.maxX && value.maxX | 0 || 0;
                                            break;
                                        case 'miny':
                                            newMinY = value && (value.minY && value.minY | 0 || value | 0) || 0;
                                            break;
                                        case 'maxy':
                                            newMaxY = value && (value.maxY && value.maxY | 0 || value | 0) || 0;
                                            break;
                                        case 'rangey':
                                            newMinY = value && value.minY && value.minY | 0 || 0;
                                            newMaxY = value && value.maxY && value.maxY | 0 || 0;
                                            break;
                                        case 'all':
                                        default:
                                            newMinX = value && value.minX && value.minX | 0 || 0;
                                            newMaxX = value && value.maxX && value.maxX | 0 || 0;
                                            newMinY = value && value.minY && value.minY | 0 || 0;
                                            newMaxY = value && value.maxY && value.maxY | 0 || 0;
                                            break;
                                    }
                                    if (newMinX != null && minX != newMinX)
                                    {
                                        minX = newMinX;
                                        rangeX = maxX - minX;
                                    }
                                    if (newMaxX != null && maxX != newMaxX)
                                    {
                                        maxX = newMaxX;
                                        rangeX = maxX - minX;
                                    }
                                    if (newMinY != null && minY != newMinY)
                                    {
                                        minY = newMinY;
                                        rangeY = maxY - minY;
                                    }
                                    if (newMaxY != null && maxY != newMaxY)
                                    {
                                        maxY = newMaxY;
                                        rangeY = maxY - minY;
                                    }
                                },
                                bind =
                                function (callback)
                                {
                                    if ($.isFunction(callback))
                                        changeEvents.push(callback);
                                },
                                unbind =
                                function (callback)
                                {
                                    if (!$.isFunction(callback))
                                        return;
                                    var i;
                                    while ((i = $.inArray(callback, changeEvents)) != - 1)
                                        changeEvents.splice(i, 1);
                                },
                                destroy =
                                function ()
                                {
                                    // unbind all possible events and null objects
                                    $(document).unbind('mouseup', mouseUp).unbind('mousemove', mouseMove);
                                    bar.unbind('mousedown', mouseDown);
                                    bar = null;
                                    arrow = null;
                                    changeEvents = null;
                                };
                        $.extend(true, $this, // public properties, methods, and event bindings - these we need to access from other controls
                                {
                                    val: val,
                                    range: range,
                                    bind: bind,
                                    unbind: unbind,
                                    destroy: destroy
                                });
                        // initialize this control
                        arrow.src = options.arrow && options.arrow.image;
                        arrow.w = options.arrow && options.arrow.width || arrow.width();
                        arrow.h = options.arrow && options.arrow.height || arrow.height();
                        bar.w = options.map && options.map.width || bar.width();
                        bar.h = options.map && options.map.height || bar.height();
                        // bind mousedown event
                        bar.bind('mousedown', mouseDown);
                        bind.call($this, draw);
                    },
                    ColorValuePicker = // controls for all the input elements for the typing in color values
                    function (picker, color, bindedHex, alphaPrecision)
                    {
                        var $this = this, // private properties and methods
                                inputs = picker.find('td.Text input'),
                                red = inputs.eq(3),
                                green = inputs.eq(4),
                                blue = inputs.eq(5),
                                alpha = inputs.length > 7 ? inputs.eq(6) : null,
                                hue = inputs.eq(0),
                                saturation = inputs.eq(1),
                                value = inputs.eq(2),
                                hex = inputs.eq(inputs.length > 7 ? 7 : 6),
                                ahex = inputs.length > 7 ? inputs.eq(8) : null,
                                keyDown = // input box key down - use arrows to alter color
                                function (e)
                                {
                                    if (e.target.value == '' && e.target != hex.get(0) && (bindedHex != null && e.target != bindedHex.get(0) || bindedHex == null))
                                        return;
                                    if (!validateKey(e))
                                        return e;
                                    switch (e.target)
                                    {
                                        case red.get(0):
                                            switch (e.keyCode)
                                            {
                                                case 38:
                                                    red.val(setValueInRange.call($this, (red.val() << 0) + 1, 0, 255));
                                                    color.val('r', red.val(), e.target);
                                                    return false;
                                                case 40:
                                                    red.val(setValueInRange.call($this, (red.val() << 0) - 1, 0, 255));
                                                    color.val('r', red.val(), e.target);
                                                    return false;
                                            }
                                            break;
                                        case green.get(0):
                                            switch (e.keyCode)
                                            {
                                                case 38:
                                                    green.val(setValueInRange.call($this, (green.val() << 0) + 1, 0, 255));
                                                    color.val('g', green.val(), e.target);
                                                    return false;
                                                case 40:
                                                    green.val(setValueInRange.call($this, (green.val() << 0) - 1, 0, 255));
                                                    color.val('g', green.val(), e.target);
                                                    return false;
                                            }
                                            break;
                                        case blue.get(0):
                                            switch (e.keyCode)
                                            {
                                                case 38:
                                                    blue.val(setValueInRange.call($this, (blue.val() << 0) + 1, 0, 255));
                                                    color.val('b', blue.val(), e.target);
                                                    return false;
                                                case 40:
                                                    blue.val(setValueInRange.call($this, (blue.val() << 0) - 1, 0, 255));
                                                    color.val('b', blue.val(), e.target);
                                                    return false;
                                            }
                                            break;
                                        case alpha && alpha.get(0):
                                            switch (e.keyCode)
                                            {
                                                case 38:
                                                    alpha.val(setValueInRange.call($this, parseFloat(alpha.val()) + 1, 0, 100));
                                                    color.val('a', Math.precision((alpha.val() * 255) / 100, alphaPrecision), e.target);
                                                    return false;
                                                case 40:
                                                    alpha.val(setValueInRange.call($this, parseFloat(alpha.val()) - 1, 0, 100));
                                                    color.val('a', Math.precision((alpha.val() * 255) / 100, alphaPrecision), e.target);
                                                    return false;
                                            }
                                            break;
                                        case hue.get(0):
                                            switch (e.keyCode)
                                            {
                                                case 38:
                                                    hue.val(setValueInRange.call($this, (hue.val() << 0) + 1, 0, 360));
                                                    color.val('h', hue.val(), e.target);
                                                    return false;
                                                case 40:
                                                    hue.val(setValueInRange.call($this, (hue.val() << 0) - 1, 0, 360));
                                                    color.val('h', hue.val(), e.target);
                                                    return false;
                                            }
                                            break;
                                        case saturation.get(0):
                                            switch (e.keyCode)
                                            {
                                                case 38:
                                                    saturation.val(setValueInRange.call($this, (saturation.val() << 0) + 1, 0, 100));
                                                    color.val('s', saturation.val(), e.target);
                                                    return false;
                                                case 40:
                                                    saturation.val(setValueInRange.call($this, (saturation.val() << 0) - 1, 0, 100));
                                                    color.val('s', saturation.val(), e.target);
                                                    return false;
                                            }
                                            break;
                                        case value.get(0):
                                            switch (e.keyCode)
                                            {
                                                case 38:
                                                    value.val(setValueInRange.call($this, (value.val() << 0) + 1, 0, 100));
                                                    color.val('v', value.val(), e.target);
                                                    return false;
                                                case 40:
                                                    value.val(setValueInRange.call($this, (value.val() << 0) - 1, 0, 100));
                                                    color.val('v', value.val(), e.target);
                                                    return false;
                                            }
                                            break;
                                    }
                                },
                                keyUp = // input box key up - validate value and set color
                                function (e)
                                {
                                    if (e.target.value == '' && e.target != hex.get(0) && (bindedHex != null && e.target != bindedHex.get(0) || bindedHex == null))
                                        return;
                                    if (!validateKey(e))
                                        return e;
                                    switch (e.target)
                                    {
                                        case red.get(0):
                                            red.val(setValueInRange.call($this, red.val(), 0, 255));
                                            color.val('r', red.val(), e.target);
                                            break;
                                        case green.get(0):
                                            green.val(setValueInRange.call($this, green.val(), 0, 255));
                                            color.val('g', green.val(), e.target);
                                            break;
                                        case blue.get(0):
                                            blue.val(setValueInRange.call($this, blue.val(), 0, 255));
                                            color.val('b', blue.val(), e.target);
                                            break;
                                        case alpha && alpha.get(0):
                                            alpha.val(setValueInRange.call($this, alpha.val(), 0, 100));
                                            color.val('a', Math.precision((alpha.val() * 255) / 100, alphaPrecision), e.target);
                                            break;
                                        case hue.get(0):
                                            hue.val(setValueInRange.call($this, hue.val(), 0, 360));
                                            color.val('h', hue.val(), e.target);
                                            break;
                                        case saturation.get(0):
                                            saturation.val(setValueInRange.call($this, saturation.val(), 0, 100));
                                            color.val('s', saturation.val(), e.target);
                                            break;
                                        case value.get(0):
                                            value.val(setValueInRange.call($this, value.val(), 0, 100));
                                            color.val('v', value.val(), e.target);
                                            break;
                                        case hex.get(0):
                                            hex.val(hex.val().replace(/[^a-fA-F0-9]/g, '').toLowerCase().substring(0, 6));
                                            bindedHex && bindedHex.val(hex.val());
                                            color.val('hex', hex.val() != '' ? hex.val() : null, e.target);
                                            break;
                                        case bindedHex && bindedHex.get(0):
                                            bindedHex.val(bindedHex.val().replace(/[^a-fA-F0-9]/g, '').toLowerCase().substring(0, 6));
                                            hex.val(bindedHex.val());
                                            color.val('hex', bindedHex.val() != '' ? bindedHex.val() : null, e.target);
                                            break;
                                        case ahex && ahex.get(0):
                                            ahex.val(ahex.val().replace(/[^a-fA-F0-9]/g, '').toLowerCase().substring(0, 2));
                                            color.val('a', ahex.val() != null ? parseInt(ahex.val(), 16) : null, e.target);
                                            break;
                                    }
                                },
                                blur = // input box blur - reset to original if value empty
                                function (e)
                                {
                                    if (color.val() != null)
                                    {
                                        switch (e.target)
                                        {
                                            case red.get(0):
                                                red.val(color.val('r'));
                                                break;
                                            case green.get(0):
                                                green.val(color.val('g'));
                                                break;
                                            case blue.get(0):
                                                blue.val(color.val('b'));
                                                break;
                                            case alpha && alpha.get(0):
                                                alpha.val(Math.precision((color.val('a') * 100) / 255, alphaPrecision));
                                                break;
                                            case hue.get(0):
                                                hue.val(color.val('h'));
                                                break;
                                            case saturation.get(0):
                                                saturation.val(color.val('s'));
                                                break;
                                            case value.get(0):
                                                value.val(color.val('v'));
                                                break;
                                            case hex.get(0):
                                            case bindedHex && bindedHex.get(0):
                                                hex.val(color.val('hex'));
                                                bindedHex && bindedHex.val(color.val('hex'));
                                                break;
                                            case ahex && ahex.get(0):
                                                ahex.val(color.val('ahex').substring(6));
                                                break;
                                        }
                                    }
                                },
                                validateKey = // validate key
                                function (e)
                                {
                                    switch (e.keyCode)
                                    {
                                        case 9:
                                        case 16:
                                        case 29:
                                        case 37:
                                        case 39:
                                            return false;
                                        case 'c'.charCodeAt():
                                        case 'v'.charCodeAt():
                                            if (e.ctrlKey)
                                                return false;
                                    }
                                    return true;
                                },
                                setValueInRange = // constrain value within range
                                function (value, min, max)
                                {
                                    if (value == '' || isNaN(value))
                                        return min;
                                    if (value > max)
                                        return max;
                                    if (value < min)
                                        return min;
                                    return value;
                                },
                                colorChanged =
                                function (ui, context)
                                {
                                    var all = ui.val('all');
                                    if (context != red.get(0))
                                        red.val(all != null ? all.r : '');
                                    if (context != green.get(0))
                                        green.val(all != null ? all.g : '');
                                    if (context != blue.get(0))
                                        blue.val(all != null ? all.b : '');
                                    if (alpha && context != alpha.get(0))
                                        alpha.val(all != null ? Math.precision((all.a * 100) / 255, alphaPrecision) : '');
                                    if (context != hue.get(0))
                                        hue.val(all != null ? all.h : '');
                                    if (context != saturation.get(0))
                                        saturation.val(all != null ? all.s : '');
                                    if (context != value.get(0))
                                        value.val(all != null ? all.v : '');
                                    if (context != hex.get(0) && (bindedHex && context != bindedHex.get(0) || !bindedHex))
                                        hex.val(all != null ? all.hex : '');
                                    if (bindedHex && context != bindedHex.get(0) && context != hex.get(0))
                                        bindedHex.val(all != null ? all.hex : '');
                                    if (ahex && context != ahex.get(0))
                                        ahex.val(all != null ? all.ahex.substring(6) : '');
                                },
                                destroy =
                                function ()
                                {
                                    // unbind all events and null objects
                                    red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).add(hex).add(bindedHex).add(ahex).unbind('keyup', keyUp).unbind('blur', blur);
                                    red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).unbind('keydown', keyDown);
                                    color.unbind(colorChanged);
                                    red = null;
                                    green = null;
                                    blue = null;
                                    alpha = null;
                                    hue = null;
                                    saturation = null;
                                    value = null;
                                    hex = null;
                                    ahex = null;
                                };
                        $.extend(true, $this, // public properties and methods
                                {
                                    destroy: destroy
                                });
                        red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).add(hex).add(bindedHex).add(ahex).bind('keyup', keyUp).bind('blur', blur);
                        red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).bind('keydown', keyDown);
                        color.bind(colorChanged);
                    };
            $.jPicker =
                    {
                        List: [], // array holding references to each active instance of the control
                        Color: // color object - we will be able to assign by any color space type or retrieve any color space info
                                // we want this public so we can optionally assign new color objects to initial values using inputs other than a string hex value (also supported)
                                        function (init)
                                        {
                                            var $this = this,
                                                    r,
                                                    g,
                                                    b,
                                                    a,
                                                    h,
                                                    s,
                                                    v,
                                                    changeEvents = new Array(),
                                                    fireChangeEvents =
                                                    function (context)
                                                    {
                                                        for (var i = 0; i < changeEvents.length; i++)
                                                            changeEvents[i].call($this, $this, context);
                                                    },
                                                    val =
                                                    function (name, value, context)
                                                    {
                                                        var set = value !== undefined;
                                                        if (!set)
                                                        {
                                                            if (name === undefined || name == null || name == '')
                                                                name = 'all';
                                                            if (r == null)
                                                                return null;
                                                            switch (name.toLowerCase())
                                                            {
                                                                case 'ahex':
                                                                    return ColorMethods.rgbaToHex({r: r, g: g, b: b, a: a});
                                                                case 'hex':
                                                                    return val('ahex').substring(0, 6);
                                                                case 'all':
                                                                    return {r: r, g: g, b: b, a: a, h: h, s: s, v: v, hex: val.call($this, 'hex'), ahex: val.call($this, 'ahex')};
                                                                default:
                                                                    var ret = {};
                                                                    for (var i = 0; i < name.length; i++)
                                                                    {
                                                                        switch (name.charAt(i))
                                                                        {
                                                                            case 'r':
                                                                                if (name.length == 1)
                                                                                    ret = r;
                                                                                else
                                                                                    ret.r = r;
                                                                                break;
                                                                            case 'g':
                                                                                if (name.length == 1)
                                                                                    ret = g;
                                                                                else
                                                                                    ret.g = g;
                                                                                break;
                                                                            case 'b':
                                                                                if (name.length == 1)
                                                                                    ret = b;
                                                                                else
                                                                                    ret.b = b;
                                                                                break;
                                                                            case 'a':
                                                                                if (name.length == 1)
                                                                                    ret = a;
                                                                                else
                                                                                    ret.a = a;
                                                                                break;
                                                                            case 'h':
                                                                                if (name.length == 1)
                                                                                    ret = h;
                                                                                else
                                                                                    ret.h = h;
                                                                                break;
                                                                            case 's':
                                                                                if (name.length == 1)
                                                                                    ret = s;
                                                                                else
                                                                                    ret.s = s;
                                                                                break;
                                                                            case 'v':
                                                                                if (name.length == 1)
                                                                                    ret = v;
                                                                                else
                                                                                    ret.v = v;
                                                                                break;
                                                                        }
                                                                    }
                                                                    return ret == {} ? val.call($this, 'all') : ret;
                                                                    break;
                                                            }
                                                        }
                                                        if (context != null && context == $this)
                                                            return;
                                                        var changed = false;
                                                        if (name == null)
                                                            name = '';
                                                        if (value == null)
                                                        {
                                                            if (r != null)
                                                            {
                                                                r = null;
                                                                changed = true;
                                                            }
                                                            if (g != null)
                                                            {
                                                                g = null;
                                                                changed = true;
                                                            }
                                                            if (b != null)
                                                            {
                                                                b = null;
                                                                changed = true;
                                                            }
                                                            if (a != null)
                                                            {
                                                                a = null;
                                                                changed = true;
                                                            }
                                                            if (h != null)
                                                            {
                                                                h = null;
                                                                changed = true;
                                                            }
                                                            if (s != null)
                                                            {
                                                                s = null;
                                                                changed = true;
                                                            }
                                                            if (v != null)
                                                            {
                                                                v = null;
                                                                changed = true;
                                                            }
                                                            changed && fireChangeEvents.call($this, context || $this);
                                                            return;
                                                        }
                                                        switch (name.toLowerCase())
                                                        {
                                                            case 'ahex':
                                                            case 'hex':
                                                                var ret = ColorMethods.hexToRgba(value && (value.ahex || value.hex) || value || '00000000');
                                                                val.call($this, 'rgba', {r: ret.r, g: ret.g, b: ret.b, a: name == 'ahex' ? ret.a : a != null ? a : 255}, context);
                                                                break;
                                                            default:
                                                                if (value && (value.ahex != null || value.hex != null))
                                                                {
                                                                    val.call($this, 'ahex', value.ahex || value.hex || '00000000', context);
                                                                    return;
                                                                }
                                                                var newV = {}, rgb = false, hsv = false;
                                                                if (value.r !== undefined && !name.indexOf('r') == -1)
                                                                    name += 'r';
                                                                if (value.g !== undefined && !name.indexOf('g') == -1)
                                                                    name += 'g';
                                                                if (value.b !== undefined && !name.indexOf('b') == -1)
                                                                    name += 'b';
                                                                if (value.a !== undefined && !name.indexOf('a') == -1)
                                                                    name += 'a';
                                                                if (value.h !== undefined && !name.indexOf('h') == -1)
                                                                    name += 'h';
                                                                if (value.s !== undefined && !name.indexOf('s') == -1)
                                                                    name += 's';
                                                                if (value.v !== undefined && !name.indexOf('v') == -1)
                                                                    name += 'v';
                                                                for (var i = 0; i < name.length; i++)
                                                                {
                                                                    switch (name.charAt(i))
                                                                    {
                                                                        case 'r':
                                                                            if (hsv)
                                                                                continue;
                                                                            rgb = true;
                                                                            newV.r = value && value.r && value.r | 0 || value && value | 0 || 0;
                                                                            if (newV.r < 0)
                                                                                newV.r = 0;
                                                                            else if (newV.r > 255)
                                                                                newV.r = 255;
                                                                            if (r != newV.r)
                                                                            {
                                                                                r = newV.r;
                                                                                changed = true;
                                                                            }
                                                                            break;
                                                                        case 'g':
                                                                            if (hsv)
                                                                                continue;
                                                                            rgb = true;
                                                                            newV.g = value && value.g && value.g | 0 || value && value | 0 || 0;
                                                                            if (newV.g < 0)
                                                                                newV.g = 0;
                                                                            else if (newV.g > 255)
                                                                                newV.g = 255;
                                                                            if (g != newV.g)
                                                                            {
                                                                                g = newV.g;
                                                                                changed = true;
                                                                            }
                                                                            break;
                                                                        case 'b':
                                                                            if (hsv)
                                                                                continue;
                                                                            rgb = true;
                                                                            newV.b = value && value.b && value.b | 0 || value && value | 0 || 0;
                                                                            if (newV.b < 0)
                                                                                newV.b = 0;
                                                                            else if (newV.b > 255)
                                                                                newV.b = 255;
                                                                            if (b != newV.b)
                                                                            {
                                                                                b = newV.b;
                                                                                changed = true;
                                                                            }
                                                                            break;
                                                                        case 'a':
                                                                            newV.a = value && value.a != null ? value.a | 0 : value != null ? value | 0 : 255;
                                                                            if (newV.a < 0)
                                                                                newV.a = 0;
                                                                            else if (newV.a > 255)
                                                                                newV.a = 255;
                                                                            if (a != newV.a)
                                                                            {
                                                                                a = newV.a;
                                                                                changed = true;
                                                                            }
                                                                            break;
                                                                        case 'h':
                                                                            if (rgb)
                                                                                continue;
                                                                            hsv = true;
                                                                            newV.h = value && value.h && value.h | 0 || value && value | 0 || 0;
                                                                            if (newV.h < 0)
                                                                                newV.h = 0;
                                                                            else if (newV.h > 360)
                                                                                newV.h = 360;
                                                                            if (h != newV.h)
                                                                            {
                                                                                h = newV.h;
                                                                                changed = true;
                                                                            }
                                                                            break;
                                                                        case 's':
                                                                            if (rgb)
                                                                                continue;
                                                                            hsv = true;
                                                                            newV.s = value && value.s != null ? value.s | 0 : value != null ? value | 0 : 100;
                                                                            if (newV.s < 0)
                                                                                newV.s = 0;
                                                                            else if (newV.s > 100)
                                                                                newV.s = 100;
                                                                            if (s != newV.s)
                                                                            {
                                                                                s = newV.s;
                                                                                changed = true;
                                                                            }
                                                                            break;
                                                                        case 'v':
                                                                            if (rgb)
                                                                                continue;
                                                                            hsv = true;
                                                                            newV.v = value && value.v != null ? value.v | 0 : value != null ? value | 0 : 100;
                                                                            if (newV.v < 0)
                                                                                newV.v = 0;
                                                                            else if (newV.v > 100)
                                                                                newV.v = 100;
                                                                            if (v != newV.v)
                                                                            {
                                                                                v = newV.v;
                                                                                changed = true;
                                                                            }
                                                                            break;
                                                                    }
                                                                }
                                                                if (changed)
                                                                {
                                                                    if (rgb)
                                                                    {
                                                                        r = r || 0;
                                                                        g = g || 0;
                                                                        b = b || 0;
                                                                        var ret = ColorMethods.rgbToHsv({r: r, g: g, b: b});
                                                                        h = ret.h;
                                                                        s = ret.s;
                                                                        v = ret.v;
                                                                    }
                                                                    else if (hsv)
                                                                    {
                                                                        h = h || 0;
                                                                        s = s != null ? s : 100;
                                                                        v = v != null ? v : 100;
                                                                        var ret = ColorMethods.hsvToRgb({h: h, s: s, v: v});
                                                                        r = ret.r;
                                                                        g = ret.g;
                                                                        b = ret.b;
                                                                    }
                                                                    a = a != null ? a : 255;
                                                                    fireChangeEvents.call($this, context || $this);
                                                                }
                                                                break;
                                                        }
                                                    },
                                                    bind =
                                                    function (callback)
                                                    {
                                                        if ($.isFunction(callback))
                                                            changeEvents.push(callback);
                                                    },
                                                    unbind =
                                                    function (callback)
                                                    {
                                                        if (!$.isFunction(callback))
                                                            return;
                                                        var i;
                                                        while ((i = $.inArray(callback, changeEvents)) != - 1)
                                                            changeEvents.splice(i, 1);
                                                    },
                                                    destroy =
                                                    function ()
                                                    {
                                                        changeEvents = null;
                                                    }
                                            $.extend(true, $this, // public properties and methods
                                                    {
                                                        val: val,
                                                        bind: bind,
                                                        unbind: unbind,
                                                        destroy: destroy
                                                    });
                                            if (init)
                                            {
                                                if (init.ahex != null)
                                                    val('ahex', init);
                                                else if (init.hex != null)
                                                    val((init.a != null ? 'a' : '') + 'hex', init.a != null ? {ahex: init.hex + ColorMethods.intToHex(init.a)} : init);
                                                else if (init.r != null && init.g != null && init.b != null)
                                                    val('rgb' + (init.a != null ? 'a' : ''), init);
                                                else if (init.h != null && init.s != null && init.v != null)
                                                    val('hsv' + (init.a != null ? 'a' : ''), init);
                                            }
                                        },
                                ColorMethods: // color conversion methods  - make public to give use to external scripts
                                        {
                                            hexToRgba:
                                                    function (hex)
                                                    {
                                                        hex = this.validateHex(hex);
                                                        if (hex == '')
                                                            return {r: null, g: null, b: null, a: null};
                                                        var r = '00', g = '00', b = '00', a = '255';
                                                        if (hex.length == 6)
                                                            hex += 'ff';
                                                        if (hex.length > 6)
                                                        {
                                                            r = hex.substring(0, 2);
                                                            g = hex.substring(2, 4);
                                                            b = hex.substring(4, 6);
                                                            a = hex.substring(6, hex.length);
                                                        }
                                                        else
                                                        {
                                                            if (hex.length > 4)
                                                            {
                                                                r = hex.substring(4, hex.length);
                                                                hex = hex.substring(0, 4);
                                                            }
                                                            if (hex.length > 2)
                                                            {
                                                                g = hex.substring(2, hex.length);
                                                                hex = hex.substring(0, 2);
                                                            }
                                                            if (hex.length > 0)
                                                                b = hex.substring(0, hex.length);
                                                        }
                                                        return {r: this.hexToInt(r), g: this.hexToInt(g), b: this.hexToInt(b), a: this.hexToInt(a)};
                                                    },
                                            validateHex:
                                                    function (hex)
                                                    {
                                                        hex = hex.toLowerCase().replace(/[^a-f0-9]/g, '');
                                                        if (hex.length > 8)
                                                            hex = hex.substring(0, 8);
                                                        return hex;
                                                    },
                                            rgbaToHex:
                                                    function (rgba)
                                                    {
                                                        return this.intToHex(rgba.r) + this.intToHex(rgba.g) + this.intToHex(rgba.b) + this.intToHex(rgba.a);
                                                    },
                                            intToHex:
                                                    function (dec)
                                                    {
                                                        var result = (dec | 0).toString(16);
                                                        if (result.length == 1)
                                                            result = ('0' + result);
                                                        return result.toLowerCase();
                                                    },
                                            hexToInt:
                                                    function (hex)
                                                    {
                                                        return parseInt(hex, 16);
                                                    },
                                            rgbToHsv:
                                                    function (rgb)
                                                    {
                                                        var r = rgb.r / 255, g = rgb.g / 255, b = rgb.b / 255, hsv = {h: 0, s: 0, v: 0}, min = 0, max = 0, delta;
                                                        if (r >= g && r >= b)
                                                        {
                                                            max = r;
                                                            min = g > b ? b : g;
                                                        }
                                                        else if (g >= b && g >= r)
                                                        {
                                                            max = g;
                                                            min = r > b ? b : r;
                                                        }
                                                        else
                                                        {
                                                            max = b;
                                                            min = g > r ? r : g;
                                                        }
                                                        hsv.v = max;
                                                        hsv.s = max ? (max - min) / max : 0;
                                                        if (!hsv.s)
                                                            hsv.h = 0;
                                                        else
                                                        {
                                                            delta = max - min;
                                                            if (r == max)
                                                                hsv.h = (g - b) / delta;
                                                            else if (g == max)
                                                                hsv.h = 2 + (b - r) / delta;
                                                            else
                                                                hsv.h = 4 + (r - g) / delta;
                                                            hsv.h = parseInt(hsv.h * 60);
                                                            if (hsv.h < 0)
                                                                hsv.h += 360;
                                                        }
                                                        hsv.s = (hsv.s * 100) | 0;
                                                        hsv.v = (hsv.v * 100) | 0;
                                                        return hsv;
                                                    },
                                            hsvToRgb:
                                                    function (hsv)
                                                    {
                                                        var rgb = {r: 0, g: 0, b: 0, a: 100}, h = hsv.h, s = hsv.s, v = hsv.v;
                                                        if (s == 0)
                                                        {
                                                            if (v == 0)
                                                                rgb.r = rgb.g = rgb.b = 0;
                                                            else
                                                                rgb.r = rgb.g = rgb.b = (v * 255 / 100) | 0;
                                                        }
                                                        else
                                                        {
                                                            if (h == 360)
                                                                h = 0;
                                                            h /= 60;
                                                            s = s / 100;
                                                            v = v / 100;
                                                            var i = h | 0,
                                                                    f = h - i,
                                                                    p = v * (1 - s),
                                                                    q = v * (1 - (s * f)),
                                                                    t = v * (1 - (s * (1 - f)));
                                                            switch (i)
                                                            {
                                                                case 0:
                                                                    rgb.r = v;
                                                                    rgb.g = t;
                                                                    rgb.b = p;
                                                                    break;
                                                                case 1:
                                                                    rgb.r = q;
                                                                    rgb.g = v;
                                                                    rgb.b = p;
                                                                    break;
                                                                case 2:
                                                                    rgb.r = p;
                                                                    rgb.g = v;
                                                                    rgb.b = t;
                                                                    break;
                                                                case 3:
                                                                    rgb.r = p;
                                                                    rgb.g = q;
                                                                    rgb.b = v;
                                                                    break;
                                                                case 4:
                                                                    rgb.r = t;
                                                                    rgb.g = p;
                                                                    rgb.b = v;
                                                                    break;
                                                                case 5:
                                                                    rgb.r = v;
                                                                    rgb.g = p;
                                                                    rgb.b = q;
                                                                    break;
                                                            }
                                                            rgb.r = (rgb.r * 255) | 0;
                                                            rgb.g = (rgb.g * 255) | 0;
                                                            rgb.b = (rgb.b * 255) | 0;
                                                        }
                                                        return rgb;
                                                    }
                                        }
                            };
                    var Color = $.jPicker.Color, List = $.jPicker.List, ColorMethods = $.jPicker.ColorMethods; // local copies for YUI compressor
                    $.fn.jPicker =
                            function (options)
                            {
                                var $arguments = arguments;
                                return this.each(
                                        function ()
                                        {
                                            var $this = this, settings = $.extend(true, {}, $.fn.jPicker.defaults, options); // local copies for YUI compressor
                                            if ($($this).get(0).nodeName.toLowerCase() == 'input') // Add color picker icon if binding to an input element and bind the events to the input
                                            {
                                                $.extend(true, settings,
                                                        {
                                                            window:
                                                                    {
                                                                        bindToInput: true,
                                                                        expandable: true,
                                                                        input: $($this)
                                                                    }
                                                        });
                                                if ($($this).val() == '')
                                                {
                                                    settings.color.active = new Color({hex: null});
                                                    settings.color.current = new Color({hex: null});
                                                }
                                                else if (ColorMethods.validateHex($($this).val()))
                                                {
                                                    settings.color.active = new Color({hex: $($this).val(), a: settings.color.active.val('a')});
                                                    settings.color.current = new Color({hex: $($this).val(), a: settings.color.active.val('a')});
                                                }
                                            }
                                            if (settings.window.expandable)
                                                $($this).after('<span class="jPicker"><span class="Icon"><span class="Color">&nbsp;</span><span class="Alpha">&nbsp;</span><span class="Image" title="Click To Open Color Picker">&nbsp;</span><span class="Container">&nbsp;</span></span></span>');
                                            else
                                                settings.window.liveUpdate = false; // Basic control binding for inline use - You will need to override the liveCallback or commitCallback function to retrieve results
                                            var isLessThanIE7 = parseFloat(navigator.appVersion.split('MSIE')[1]) < 7 && document.body.filters, // needed to run the AlphaImageLoader function for IE6
                                                    container = null,
                                                    colorMapDiv = null,
                                                    colorBarDiv = null,
                                                    colorMapL1 = null, // different layers of colorMap and colorBar
                                                    colorMapL2 = null,
                                                    colorMapL3 = null,
                                                    colorBarL1 = null,
                                                    colorBarL2 = null,
                                                    colorBarL3 = null,
                                                    colorBarL4 = null,
                                                    colorBarL5 = null,
                                                    colorBarL6 = null,
                                                    colorMap = null, // color maps
                                                    colorBar = null,
                                                    colorPicker = null,
                                                    elementStartX = null, // Used to record the starting css positions for dragging the control
                                                    elementStartY = null,
                                                    pageStartX = null, // Used to record the mousedown coordinates for dragging the control
                                                    pageStartY = null,
                                                    activePreview = null, // color boxes above the radio buttons
                                                    currentPreview = null,
                                                    okButton = null,
                                                    cancelButton = null,
                                                    grid = null, // preset colors grid
                                                    iconColor = null, // iconColor for popup icon
                                                    iconAlpha = null, // iconAlpha for popup icon
                                                    iconImage = null, // iconImage popup icon
                                                    moveBar = null, // drag bar
                                                    setColorMode = // set color mode and update visuals for the new color mode
                                                    function (colorMode)
                                                    {
                                                        var active = color.active, // local copies for YUI compressor
                                                                clientPath = images.clientPath,
                                                                hex = active.val('hex'),
                                                                rgbMap,
                                                                rgbBar;
                                                        settings.color.mode = colorMode;
                                                        switch (colorMode)
                                                        {
                                                            case 'h':
                                                                setTimeout(
                                                                        function ()
                                                                        {
                                                                            setBG.call($this, colorMapDiv, 'transparent');
                                                                            setImgLoc.call($this, colorMapL1, 0);
                                                                            setAlpha.call($this, colorMapL1, 100);
                                                                            setImgLoc.call($this, colorMapL2, 260);
                                                                            setAlpha.call($this, colorMapL2, 100);
                                                                            setBG.call($this, colorBarDiv, 'transparent');
                                                                            setImgLoc.call($this, colorBarL1, 0);
                                                                            setAlpha.call($this, colorBarL1, 100);
                                                                            setImgLoc.call($this, colorBarL2, 260);
                                                                            setAlpha.call($this, colorBarL2, 100);
                                                                            setImgLoc.call($this, colorBarL3, 260);
                                                                            setAlpha.call($this, colorBarL3, 100);
                                                                            setImgLoc.call($this, colorBarL4, 260);
                                                                            setAlpha.call($this, colorBarL4, 100);
                                                                            setImgLoc.call($this, colorBarL6, 260);
                                                                            setAlpha.call($this, colorBarL6, 100);
                                                                        }, 0);
                                                                colorMap.range('all', {minX: 0, maxX: 100, minY: 0, maxY: 100});
                                                                colorBar.range('rangeY', {minY: 0, maxY: 360});
                                                                if (active.val('ahex') == null)
                                                                    break;
                                                                colorMap.val('xy', {x: active.val('s'), y: 100 - active.val('v')}, colorMap);
                                                                colorBar.val('y', 360 - active.val('h'), colorBar);
                                                                break;
                                                            case 's':
                                                                setTimeout(
                                                                        function ()
                                                                        {
                                                                            setBG.call($this, colorMapDiv, 'transparent');
                                                                            setImgLoc.call($this, colorMapL1, -260);
                                                                            setImgLoc.call($this, colorMapL2, -520);
                                                                            setImgLoc.call($this, colorBarL1, -260);
                                                                            setImgLoc.call($this, colorBarL2, -520);
                                                                            setImgLoc.call($this, colorBarL6, 260);
                                                                            setAlpha.call($this, colorBarL6, 100);
                                                                        }, 0);
                                                                colorMap.range('all', {minX: 0, maxX: 360, minY: 0, maxY: 100});
                                                                colorBar.range('rangeY', {minY: 0, maxY: 100});
                                                                if (active.val('ahex') == null)
                                                                    break;
                                                                colorMap.val('xy', {x: active.val('h'), y: 100 - active.val('v')}, colorMap);
                                                                colorBar.val('y', 100 - active.val('s'), colorBar);
                                                                break;
                                                            case 'v':
                                                                setTimeout(
                                                                        function ()
                                                                        {
                                                                            setBG.call($this, colorMapDiv, '000000');
                                                                            setImgLoc.call($this, colorMapL1, -780);
                                                                            setImgLoc.call($this, colorMapL2, 260);
                                                                            setBG.call($this, colorBarDiv, hex);
                                                                            setImgLoc.call($this, colorBarL1, -520);
                                                                            setImgLoc.call($this, colorBarL2, 260);
                                                                            setAlpha.call($this, colorBarL2, 100);
                                                                            setImgLoc.call($this, colorBarL6, 260);
                                                                            setAlpha.call($this, colorBarL6, 100);
                                                                        }, 0);
                                                                colorMap.range('all', {minX: 0, maxX: 360, minY: 0, maxY: 100});
                                                                colorBar.range('rangeY', {minY: 0, maxY: 100});
                                                                if (active.val('ahex') == null)
                                                                    break;
                                                                colorMap.val('xy', {x: active.val('h'), y: 100 - active.val('s')}, colorMap);
                                                                colorBar.val('y', 100 - active.val('v'), colorBar);
                                                                break;
                                                            case 'r':
                                                                rgbMap = -1040;
                                                                rgbBar = -780;
                                                                colorMap.range('all', {minX: 0, maxX: 255, minY: 0, maxY: 255});
                                                                colorBar.range('rangeY', {minY: 0, maxY: 255});
                                                                if (active.val('ahex') == null)
                                                                    break;
                                                                colorMap.val('xy', {x: active.val('b'), y: 255 - active.val('g')}, colorMap);
                                                                colorBar.val('y', 255 - active.val('r'), colorBar);
                                                                break;
                                                            case 'g':
                                                                rgbMap = -1560;
                                                                rgbBar = -1820;
                                                                colorMap.range('all', {minX: 0, maxX: 255, minY: 0, maxY: 255});
                                                                colorBar.range('rangeY', {minY: 0, maxY: 255});
                                                                if (active.val('ahex') == null)
                                                                    break;
                                                                colorMap.val('xy', {x: active.val('b'), y: 255 - active.val('r')}, colorMap);
                                                                colorBar.val('y', 255 - active.val('g'), colorBar);
                                                                break;
                                                            case 'b':
                                                                rgbMap = -2080;
                                                                rgbBar = -2860;
                                                                colorMap.range('all', {minX: 0, maxX: 255, minY: 0, maxY: 255});
                                                                colorBar.range('rangeY', {minY: 0, maxY: 255});
                                                                if (active.val('ahex') == null)
                                                                    break;
                                                                colorMap.val('xy', {x: active.val('r'), y: 255 - active.val('g')}, colorMap);
                                                                colorBar.val('y', 255 - active.val('b'), colorBar);
                                                                break;
                                                            case 'a':
                                                                setTimeout(
                                                                        function ()
                                                                        {
                                                                            setBG.call($this, colorMapDiv, 'transparent');
                                                                            setImgLoc.call($this, colorMapL1, -260);
                                                                            setImgLoc.call($this, colorMapL2, -520);
                                                                            setImgLoc.call($this, colorBarL1, 260);
                                                                            setImgLoc.call($this, colorBarL2, 260);
                                                                            setAlpha.call($this, colorBarL2, 100);
                                                                            setImgLoc.call($this, colorBarL6, 0);
                                                                            setAlpha.call($this, colorBarL6, 100);
                                                                        }, 0);
                                                                colorMap.range('all', {minX: 0, maxX: 360, minY: 0, maxY: 100});
                                                                colorBar.range('rangeY', {minY: 0, maxY: 255});
                                                                if (active.val('ahex') == null)
                                                                    break;
                                                                colorMap.val('xy', {x: active.val('h'), y: 100 - active.val('v')}, colorMap);
                                                                colorBar.val('y', 255 - active.val('a'), colorBar);
                                                                break;
                                                            default:
                                                                throw ('Invalid Mode');
                                                                break;
                                                        }
                                                        switch (colorMode)
                                                        {
                                                            case 'h':
                                                                break;
                                                            case 's':
                                                            case 'v':
                                                            case 'a':
                                                                setTimeout(
                                                                        function ()
                                                                        {
                                                                            setAlpha.call($this, colorMapL1, 100);
                                                                            setAlpha.call($this, colorBarL1, 100);
                                                                            setImgLoc.call($this, colorBarL3, 260);
                                                                            setAlpha.call($this, colorBarL3, 100);
                                                                            setImgLoc.call($this, colorBarL4, 260);
                                                                            setAlpha.call($this, colorBarL4, 100);
                                                                        }, 0);
                                                                break;
                                                            case 'r':
                                                            case 'g':
                                                            case 'b':
                                                                setTimeout(
                                                                        function ()
                                                                        {
                                                                            setBG.call($this, colorMapDiv, 'transparent');
                                                                            setBG.call($this, colorBarDiv, 'transparent');
                                                                            setAlpha.call($this, colorBarL1, 100);
                                                                            setAlpha.call($this, colorMapL1, 100);
                                                                            setImgLoc.call($this, colorMapL1, rgbMap);
                                                                            setImgLoc.call($this, colorMapL2, rgbMap - 260);
                                                                            setImgLoc.call($this, colorBarL1, rgbBar - 780);
                                                                            setImgLoc.call($this, colorBarL2, rgbBar - 520);
                                                                            setImgLoc.call($this, colorBarL3, rgbBar);
                                                                            setImgLoc.call($this, colorBarL4, rgbBar - 260);
                                                                            setImgLoc.call($this, colorBarL6, 260);
                                                                            setAlpha.call($this, colorBarL6, 100);
                                                                        }, 0);
                                                                break;
                                                        }
                                                        if (active.val('ahex') == null)
                                                            return;
                                                        activeColorChanged.call($this, active);
                                                    },
                                                    activeColorChanged = // Update color when user changes text values
                                                    function (ui, context)
                                                    {
                                                        if (context == null || (context != colorBar && context != colorMap))
                                                            positionMapAndBarArrows.call($this, ui, context);
                                                        setTimeout(
                                                                function ()
                                                                {
                                                                    updatePreview.call($this, ui);
                                                                    updateMapVisuals.call($this, ui);
                                                                    updateBarVisuals.call($this, ui);
                                                                }, 0);
                                                    },
                                                    mapValueChanged = // user has dragged the ColorMap pointer
                                                    function (ui, context)
                                                    {
                                                        var active = color.active;
                                                        if (context != colorMap && active.val() == null)
                                                            return;
                                                        var xy = ui.val('all');
                                                        switch (settings.color.mode)
                                                        {
                                                            case 'h':
                                                                active.val('sv', {s: xy.x, v: 100 - xy.y}, context);
                                                                break;
                                                            case 's':
                                                            case 'a':
                                                                active.val('hv', {h: xy.x, v: 100 - xy.y}, context);
                                                                break;
                                                            case 'v':
                                                                active.val('hs', {h: xy.x, s: 100 - xy.y}, context);
                                                                break;
                                                            case 'r':
                                                                active.val('gb', {g: 255 - xy.y, b: xy.x}, context);
                                                                break;
                                                            case 'g':
                                                                active.val('rb', {r: 255 - xy.y, b: xy.x}, context);
                                                                break;
                                                            case 'b':
                                                                active.val('rg', {r: xy.x, g: 255 - xy.y}, context);
                                                                break;
                                                        }
                                                    },
                                                    colorBarValueChanged = // user has dragged the ColorBar slider
                                                    function (ui, context)
                                                    {
                                                        var active = color.active;
                                                        if (context != colorBar && active.val() == null)
                                                            return;
                                                        switch (settings.color.mode)
                                                        {
                                                            case 'h':
                                                                active.val('h', {h: 360 - ui.val('y')}, context);
                                                                break;
                                                            case 's':
                                                                active.val('s', {s: 100 - ui.val('y')}, context);
                                                                break;
                                                            case 'v':
                                                                active.val('v', {v: 100 - ui.val('y')}, context);
                                                                break;
                                                            case 'r':
                                                                active.val('r', {r: 255 - ui.val('y')}, context);
                                                                break;
                                                            case 'g':
                                                                active.val('g', {g: 255 - ui.val('y')}, context);
                                                                break;
                                                            case 'b':
                                                                active.val('b', {b: 255 - ui.val('y')}, context);
                                                                break;
                                                            case 'a':
                                                                active.val('a', 255 - ui.val('y'), context);
                                                                break;
                                                        }
                                                    },
                                                    positionMapAndBarArrows = // position map and bar arrows to match current color
                                                    function (ui, context)
                                                    {
                                                        if (context != colorMap)
                                                        {
                                                            switch (settings.color.mode)
                                                            {
                                                                case 'h':
                                                                    var sv = ui.val('sv');
                                                                    colorMap.val('xy', {x: sv != null ? sv.s : 100, y: 100 - (sv != null ? sv.v : 100)}, context);
                                                                    break;
                                                                case 's':
                                                                case 'a':
                                                                    var hv = ui.val('hv');
                                                                    colorMap.val('xy', {x: hv && hv.h || 0, y: 100 - (hv != null ? hv.v : 100)}, context);
                                                                    break;
                                                                case 'v':
                                                                    var hs = ui.val('hs');
                                                                    colorMap.val('xy', {x: hs && hs.h || 0, y: 100 - (hs != null ? hs.s : 100)}, context);
                                                                    break;
                                                                case 'r':
                                                                    var bg = ui.val('bg');
                                                                    colorMap.val('xy', {x: bg && bg.b || 0, y: 255 - (bg && bg.g || 0)}, context);
                                                                    break;
                                                                case 'g':
                                                                    var br = ui.val('br');
                                                                    colorMap.val('xy', {x: br && br.b || 0, y: 255 - (br && br.r || 0)}, context);
                                                                    break;
                                                                case 'b':
                                                                    var rg = ui.val('rg');
                                                                    colorMap.val('xy', {x: rg && rg.r || 0, y: 255 - (rg && rg.g || 0)}, context);
                                                                    break;
                                                            }
                                                        }
                                                        if (context != colorBar)
                                                        {
                                                            switch (settings.color.mode)
                                                            {
                                                                case 'h':
                                                                    colorBar.val('y', 360 - (ui.val('h') || 0), context);
                                                                    break;
                                                                case 's':
                                                                    var s = ui.val('s');
                                                                    colorBar.val('y', 100 - (s != null ? s : 100), context);
                                                                    break;
                                                                case 'v':
                                                                    var v = ui.val('v');
                                                                    colorBar.val('y', 100 - (v != null ? v : 100), context);
                                                                    break;
                                                                case 'r':
                                                                    colorBar.val('y', 255 - (ui.val('r') || 0), context);
                                                                    break;
                                                                case 'g':
                                                                    colorBar.val('y', 255 - (ui.val('g') || 0), context);
                                                                    break;
                                                                case 'b':
                                                                    colorBar.val('y', 255 - (ui.val('b') || 0), context);
                                                                    break;
                                                                case 'a':
                                                                    var a = ui.val('a');
                                                                    colorBar.val('y', 255 - (a != null ? a : 255), context);
                                                                    break;
                                                            }
                                                        }
                                                    },
                                                    updatePreview =
                                                    function (ui)
                                                    {
                                                        try
                                                        {
                                                            var all = ui.val('all');
                                                            activePreview.css({backgroundColor: all && '#' + all.hex || 'transparent'});
                                                            setAlpha.call($this, activePreview, all && Math.precision((all.a * 100) / 255, 4) || 0);
                                                        }
                                                        catch (e) {
                                                        }
                                                    },
                                                    updateMapVisuals =
                                                    function (ui)
                                                    {
                                                        switch (settings.color.mode)
                                                        {
                                                            case 'h':
                                                                setBG.call($this, colorMapDiv, new Color({h: ui.val('h') || 0, s: 100, v: 100}).val('hex'));
                                                                break;
                                                            case 's':
                                                            case 'a':
                                                                var s = ui.val('s');
                                                                setAlpha.call($this, colorMapL2, 100 - (s != null ? s : 100));
                                                                break;
                                                            case 'v':
                                                                var v = ui.val('v');
                                                                setAlpha.call($this, colorMapL1, v != null ? v : 100);
                                                                break;
                                                            case 'r':
                                                                setAlpha.call($this, colorMapL2, Math.precision((ui.val('r') || 0) / 255 * 100, 4));
                                                                break;
                                                            case 'g':
                                                                setAlpha.call($this, colorMapL2, Math.precision((ui.val('g') || 0) / 255 * 100, 4));
                                                                break;
                                                            case 'b':
                                                                setAlpha.call($this, colorMapL2, Math.precision((ui.val('b') || 0) / 255 * 100));
                                                                break;
                                                        }
                                                        var a = ui.val('a');
                                                        setAlpha.call($this, colorMapL3, Math.precision(((255 - (a || 0)) * 100) / 255, 4));
                                                    },
                                                    updateBarVisuals =
                                                    function (ui)
                                                    {
                                                        switch (settings.color.mode)
                                                        {
                                                            case 'h':
                                                                var a = ui.val('a');
                                                                setAlpha.call($this, colorBarL5, Math.precision(((255 - (a || 0)) * 100) / 255, 4));
                                                                break;
                                                            case 's':
                                                                var hva = ui.val('hva'),
                                                                        saturatedColor = new Color({h: hva && hva.h || 0, s: 100, v: hva != null ? hva.v : 100});
                                                                setBG.call($this, colorBarDiv, saturatedColor.val('hex'));
                                                                setAlpha.call($this, colorBarL2, 100 - (hva != null ? hva.v : 100));
                                                                setAlpha.call($this, colorBarL5, Math.precision(((255 - (hva && hva.a || 0)) * 100) / 255, 4));
                                                                break;
                                                            case 'v':
                                                                var hsa = ui.val('hsa'),
                                                                        valueColor = new Color({h: hsa && hsa.h || 0, s: hsa != null ? hsa.s : 100, v: 100});
                                                                setBG.call($this, colorBarDiv, valueColor.val('hex'));
                                                                setAlpha.call($this, colorBarL5, Math.precision(((255 - (hsa && hsa.a || 0)) * 100) / 255, 4));
                                                                break;
                                                            case 'r':
                                                            case 'g':
                                                            case 'b':
                                                                var hValue = 0, vValue = 0, rgba = ui.val('rgba');
                                                                if (settings.color.mode == 'r')
                                                                {
                                                                    hValue = rgba && rgba.b || 0;
                                                                    vValue = rgba && rgba.g || 0;
                                                                }
                                                                else if (settings.color.mode == 'g')
                                                                {
                                                                    hValue = rgba && rgba.b || 0;
                                                                    vValue = rgba && rgba.r || 0;
                                                                }
                                                                else if (settings.color.mode == 'b')
                                                                {
                                                                    hValue = rgba && rgba.r || 0;
                                                                    vValue = rgba && rgba.g || 0;
                                                                }
                                                                var middle = vValue > hValue ? hValue : vValue;
                                                                setAlpha.call($this, colorBarL2, hValue > vValue ? Math.precision(((hValue - vValue) / (255 - vValue)) * 100, 4) : 0);
                                                                setAlpha.call($this, colorBarL3, vValue > hValue ? Math.precision(((vValue - hValue) / (255 - hValue)) * 100, 4) : 0);
                                                                setAlpha.call($this, colorBarL4, Math.precision((middle / 255) * 100, 4));
                                                                setAlpha.call($this, colorBarL5, Math.precision(((255 - (rgba && rgba.a || 0)) * 100) / 255, 4));
                                                                break;
                                                            case 'a':
                                                                var a = ui.val('a');
                                                                setBG.call($this, colorBarDiv, ui.val('hex') || '000000');
                                                                setAlpha.call($this, colorBarL5, a != null ? 0 : 100);
                                                                setAlpha.call($this, colorBarL6, a != null ? 100 : 0);
                                                                break;
                                                        }
                                                    },
                                                    setBG =
                                                    function (el, c)
                                                    {
                                                        el.css({backgroundColor: c && c.length == 6 && '#' + c || 'transparent'});
                                                    },
                                                    setImg =
                                                    function (img, src)
                                                    {
                                                        if (isLessThanIE7 && (src.indexOf('AlphaBar.png') != -1 || src.indexOf('Bars.png') != -1 || src.indexOf('Maps.png') != -1))
                                                        {
                                                            img.attr('pngSrc', src);
                                                            img.css({backgroundImage: 'none', filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\')'});
                                                        }
                                                        else
                                                            img.css({backgroundImage: 'url(\'' + src + '\')'});
                                                    },
                                                    setImgLoc =
                                                    function (img, y)
                                                    {
                                                        img.css({top: y + 'px'});
                                                    },
                                                    setAlpha =
                                                    function (obj, alpha)
                                                    {
                                                        obj.css({visibility: alpha > 0 ? 'visible' : 'hidden'});
                                                        if (alpha > 0 && alpha < 100)
                                                        {
                                                            if (isLessThanIE7)
                                                            {
                                                                var src = obj.attr('pngSrc');
                                                                if (src != null && (src.indexOf('AlphaBar.png') != -1 || src.indexOf('Bars.png') != -1 || src.indexOf('Maps.png') != -1))
                                                                    obj.css({filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\') progid:DXImageTransform.Microsoft.Alpha(opacity=' + alpha + ')'});
                                                                else
                                                                    obj.css({opacity: Math.precision(alpha / 100, 4)});
                                                            }
                                                            else
                                                                obj.css({opacity: Math.precision(alpha / 100, 4)});
                                                        }
                                                        else if (alpha == 0 || alpha == 100)
                                                        {
                                                            if (isLessThanIE7)
                                                            {
                                                                var src = obj.attr('pngSrc');
                                                                if (src != null && (src.indexOf('AlphaBar.png') != -1 || src.indexOf('Bars.png') != -1 || src.indexOf('Maps.png') != -1))
                                                                    obj.css({filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\')'});
                                                                else
                                                                    obj.css({opacity: ''});
                                                            }
                                                            else
                                                                obj.css({opacity: ''});
                                                        }
                                                    },
                                                    revertColor = // revert color to original color when opened
                                                    function ()
                                                    {
                                                        color.active.val('ahex', color.current.val('ahex'));
                                                    },
                                                    commitColor = // commit the color changes
                                                    function ()
                                                    {
                                                        color.current.val('ahex', color.active.val('ahex'));
                                                    },
                                                    radioClicked =
                                                    function (e)
                                                    {
                                                        $(this).parents('tbody:first').find('input:radio[value!="' + e.target.value + '"]').removeAttr('checked');
                                                        setColorMode.call($this, e.target.value);
                                                    },
                                                    currentClicked =
                                                    function ()
                                                    {
                                                        revertColor.call($this);
                                                    },
                                                    cancelClicked =
                                                    function ()
                                                    {
                                                        revertColor.call($this);
                                                        settings.window.expandable && hide.call($this);
                                                        $.isFunction(cancelCallback) && cancelCallback.call($this, color.active, cancelButton);
                                                    },
                                                    okClicked =
                                                    function ()
                                                    {
                                                        commitColor.call($this);
                                                        settings.window.expandable && hide.call($this);
                                                        $.isFunction(commitCallback) && commitCallback.call($this, color.active, okButton);
                                                    },
                                                    iconImageClicked =
                                                    function ()
                                                    {
                                                        show.call($this);
                                                    },
                                                    currentColorChanged =
                                                    function (ui, context)
                                                    {
                                                        var hex = ui.val('hex');
                                                        currentPreview.css({backgroundColor: hex && '#' + hex || 'transparent'});
                                                        setAlpha.call($this, currentPreview, Math.precision(((ui.val('a') || 0) * 100) / 255, 4));
                                                    },
                                                    expandableColorChanged =
                                                    function (ui, context)
                                                    {
                                                        var hex = ui.val('hex');
                                                        var va = ui.val('va');
                                                        iconColor.css({backgroundColor: hex && '#' + hex || 'transparent'});
                                                        setAlpha.call($this, iconAlpha, Math.precision(((255 - (va && va.a || 0)) * 100) / 255, 4));
                                                        if (settings.window.bindToInput && settings.window.updateInputColor)
                                                            settings.window.input.css(
                                                                    {
                                                                        backgroundColor: hex && '#' + hex || 'transparent',
                                                                        color: va == null || va.v > 75 ? '#000000' : '#ffffff'
                                                                    });
                                                    },
                                                    moveBarMouseDown =
                                                    function (e)
                                                    {
                                                        var element = settings.window.element, // local copies for YUI compressor
                                                                page = settings.window.page;
                                                        elementStartX = parseInt(container.css('left'));
                                                        elementStartY = parseInt(container.css('top'));
                                                        pageStartX = e.pageX;
                                                        pageStartY = e.pageY;
                                                        // bind events to document to move window - we will unbind these on mouseup
                                                        $(document).bind('mousemove', documentMouseMove).bind('mouseup', documentMouseUp);
                                                        e.preventDefault(); // prevent attempted dragging of the column
                                                    },
                                                    documentMouseMove =
                                                    function (e)
                                                    {
                                                        container.css({left: elementStartX - (pageStartX - e.pageX) + 'px', top: elementStartY - (pageStartY - e.pageY) + 'px'});
                                                        if (settings.window.expandable && !$.support.boxModel)
                                                            container.prev().css({left: container.css("left"), top: container.css("top")});
                                                        e.stopPropagation();
                                                        e.preventDefault();
                                                        return false;
                                                    },
                                                    documentMouseUp =
                                                    function (e)
                                                    {
                                                        $(document).unbind('mousemove', documentMouseMove).unbind('mouseup', documentMouseUp);
                                                        e.stopPropagation();
                                                        e.preventDefault();
                                                        return false;
                                                    },
                                                    quickPickClicked =
                                                    function (e)
                                                    {
                                                        e.preventDefault();
                                                        e.stopPropagation();
                                                        color.active.val('ahex', $(this).attr('title') || null, e.target);
                                                        return false;
                                                    },
                                                    commitCallback = $.isFunction($arguments[1]) && $arguments[1] || null,
                                                    liveCallback = $.isFunction($arguments[2]) && $arguments[2] || null,
                                                    cancelCallback = $.isFunction($arguments[3]) && $arguments[3] || null,
                                                    show =
                                                    function ()
                                                    {
                                                        color.current.val('ahex', color.active.val('ahex'));
                                                        var attachIFrame = function ()
                                                        {
                                                            if (!settings.window.expandable || $.support.boxModel)
                                                                return;
                                                            var table = container.find('table:first');
                                                            container.before('<iframe/>');
                                                            container.prev().css({width: table.width(), height: container.height(), opacity: 0, position: 'absolute', left: container.css("left"), top: container.css("top")});
                                                        };
                                                        if (settings.window.expandable)
                                                        {
                                                            $(document.body).children('div.jPicker.Container').css({zIndex: 10});
                                                            container.css({zIndex: 20});
                                                        }
                                                        switch (settings.window.effects.type)
                                                        {
                                                            case 'fade':
                                                                container.fadeIn(settings.window.effects.speed.show, attachIFrame);
                                                                break;
                                                            case 'slide':
                                                                container.slideDown(settings.window.effects.speed.show, attachIFrame);
                                                                break;
                                                            case 'show':
                                                            default:
                                                                container.show(settings.window.effects.speed.show, attachIFrame);
                                                                break;
                                                        }
                                                    },
                                                    hide =
                                                    function ()
                                                    {
                                                        var removeIFrame = function ()
                                                        {
                                                            if (settings.window.expandable)
                                                                container.css({zIndex: 10});
                                                            if (!settings.window.expandable || $.support.boxModel)
                                                                return;
                                                            container.prev().remove();
                                                        };
                                                        switch (settings.window.effects.type)
                                                        {
                                                            case 'fade':
                                                                container.fadeOut(settings.window.effects.speed.hide, removeIFrame);
                                                                break;
                                                            case 'slide':
                                                                container.slideUp(settings.window.effects.speed.hide, removeIFrame);
                                                                break;
                                                            case 'show':
                                                            default:
                                                                container.hide(settings.window.effects.speed.hide, removeIFrame);
                                                                break;
                                                        }
                                                    },
                                                    initialize =
                                                    function ()
                                                    {
                                                        var win = settings.window,
                                                                popup = win.expandable ? $($this).next().find('.Container:first') : null;
                                                        container = win.expandable ? $('<div/>') : $($this);
                                                        container.addClass('jPicker Container');
                                                        if (win.expandable)
                                                            container.hide();
                                                        container.get(0).onselectstart = function (event) {
                                                            if (event.target.nodeName.toLowerCase() !== 'input')
                                                                return false;
                                                        };
                                                        // inject html source code - we are using a single table for this control - I know tables are considered bad, but it takes care of equal height columns and
                                                        // this control really is tabular data, so I believe it is the right move
                                                        var all = color.active.val('all');
                                                        if (win.alphaPrecision < 0)
                                                            win.alphaPrecision = 0;
                                                        else if (win.alphaPrecision > 2)
                                                            win.alphaPrecision = 2;
                                                        var controlHtml = '<table class="jPicker" cellpadding="0" cellspacing="0"><tbody>' + (win.expandable ? '<tr><td class="Move" colspan="5">&nbsp;</td></tr>' : '') + '<tr><td rowspan="9"><h2 class="Title">' + (win.title || localization.text.title) + '</h2><div class="Map"><span class="Map1">&nbsp;</span><span class="Map2">&nbsp;</span><span class="Map3">&nbsp;</span><img src="' + images.clientPath + images.colorMap.arrow.file + '" class="Arrow"/></div></td><td rowspan="9"><div class="Bar"><span class="Map1">&nbsp;</span><span class="Map2">&nbsp;</span><span class="Map3">&nbsp;</span><span class="Map4">&nbsp;</span><span class="Map5">&nbsp;</span><span class="Map6">&nbsp;</span><img src="' + images.clientPath + images.colorBar.arrow.file + '" class="Arrow"/></div></td><td colspan="2" class="Preview">' + localization.text.newColor + '<div><span class="Active" title="' + localization.tooltips.colors.newColor + '">&nbsp;</span><span class="Current" title="' + localization.tooltips.colors.currentColor + '">&nbsp;</span></div>' + localization.text.currentColor + '</td><td rowspan="9" class="Button"><input type="button" class="Ok" value="' + localization.text.ok + '" title="' + localization.tooltips.buttons.ok + '"/><input type="button" class="Cancel" value="' + localization.text.cancel + '" title="' + localization.tooltips.buttons.cancel + '"/><hr/><div class="Grid">&nbsp;</div></td></tr><tr class="Hue"><td class="Radio"><label title="' + localization.tooltips.hue.radio + '"><input type="radio" value="h"' + (settings.color.mode == 'h' ? ' checked="checked"' : '') + '/>H:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.h : '') + '" title="' + localization.tooltips.hue.textbox + '"/>&nbsp;&deg;</td></tr><tr class="Saturation"><td class="Radio"><label title="' + localization.tooltips.saturation.radio + '"><input type="radio" value="s"' + (settings.color.mode == 's' ? ' checked="checked"' : '') + '/>S:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.s : '') + '" title="' + localization.tooltips.saturation.textbox + '"/>&nbsp;%</td></tr><tr class="Value"><td class="Radio"><label title="' + localization.tooltips.value.radio + '"><input type="radio" value="v"' + (settings.color.mode == 'v' ? ' checked="checked"' : '') + '/>V:</label><br/><br/></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.v : '') + '" title="' + localization.tooltips.value.textbox + '"/>&nbsp;%<br/><br/></td></tr><tr class="Red"><td class="Radio"><label title="' + localization.tooltips.red.radio + '"><input type="radio" value="r"' + (settings.color.mode == 'r' ? ' checked="checked"' : '') + '/>R:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.r : '') + '" title="' + localization.tooltips.red.textbox + '"/></td></tr><tr class="Green"><td class="Radio"><label title="' + localization.tooltips.green.radio + '"><input type="radio" value="g"' + (settings.color.mode == 'g' ? ' checked="checked"' : '') + '/>G:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.g : '') + '" title="' + localization.tooltips.green.textbox + '"/></td></tr><tr class="Blue"><td class="Radio"><label title="' + localization.tooltips.blue.radio + '"><input type="radio" value="b"' + (settings.color.mode == 'b' ? ' checked="checked"' : '') + '/>B:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.b : '') + '" title="' + localization.tooltips.blue.textbox + '"/></td></tr><tr class="Alpha"><td class="Radio">' + (win.alphaSupport ? '<label title="' + localization.tooltips.alpha.radio + '"><input type="radio" value="a"' + (settings.color.mode == 'a' ? ' checked="checked"' : '') + '/>A:</label>' : '&nbsp;') + '</td><td class="Text">' + (win.alphaSupport ? '<input type="text" maxlength="' + (3 + win.alphaPrecision) + '" value="' + (all != null ? Math.precision((all.a * 100) / 255, win.alphaPrecision) : '') + '" title="' + localization.tooltips.alpha.textbox + '"/>&nbsp;%' : '&nbsp;') + '</td></tr><tr class="Hex"><td colspan="2" class="Text"><label title="' + localization.tooltips.hex.textbox + '">#:<input type="text" maxlength="6" class="Hex" value="' + (all != null ? all.hex : '') + '"/></label>' + (win.alphaSupport ? '<input type="text" maxlength="2" class="AHex" value="' + (all != null ? all.ahex.substring(6) : '') + '" title="' + localization.tooltips.hex.alpha + '"/></td>' : '&nbsp;') + '</tr></tbody></table>';
                                                        if (win.expandable)
                                                        {
                                                            container.html(controlHtml);
                                                            if ($(document.body).children('div.jPicker.Container').length == 0)
                                                                $(document.body).prepend(container);
                                                            else
                                                                $(document.body).children('div.jPicker.Container:last').after(container);
                                                            container.mousedown(
                                                                    function ()
                                                                    {
                                                                        $(document.body).children('div.jPicker.Container').css({zIndex: 10});
                                                                        container.css({zIndex: 20});
                                                                    });
                                                            container.css(// positions must be set and display set to absolute before source code injection or IE will size the container to fit the window
                                                                    {
                                                                        left:
                                                                                win.position.x == 'left' ? (popup.offset().left - 530 - (win.position.y == 'center' ? 25 : 0)) + 'px' :
                                                                                win.position.x == 'center' ? (popup.offset().left - 260) + 'px' :
                                                                                win.position.x == 'right' ? (popup.offset().left - 10 + (win.position.y == 'center' ? 25 : 0)) + 'px' :
                                                                                win.position.x == 'screenCenter' ? (($(document).width() >> 1) - 260) + 'px' : (popup.offset().left + parseInt(win.position.x)) + 'px',
                                                                        position: 'absolute',
                                                                        top: win.position.y == 'top' ? (popup.offset().top - 312) + 'px' :
                                                                                win.position.y == 'center' ? (popup.offset().top - 156) + 'px' :
                                                                                win.position.y == 'bottom' ? (popup.offset().top + 25) + 'px' : (popup.offset().top + parseInt(win.position.y)) + 'px'
                                                                    });
                                                        }
                                                        else
                                                        {
                                                            container = $($this);
                                                            container.html(controlHtml);
                                                        }
                                                        // initialize the objects to the source code just injected
                                                        var tbody = container.find('tbody:first');
                                                        colorMapDiv = tbody.find('div.Map:first');
                                                        colorBarDiv = tbody.find('div.Bar:first');
                                                        var MapMaps = colorMapDiv.find('span'),
                                                                BarMaps = colorBarDiv.find('span');
                                                        colorMapL1 = MapMaps.filter('.Map1:first');
                                                        colorMapL2 = MapMaps.filter('.Map2:first');
                                                        colorMapL3 = MapMaps.filter('.Map3:first');
                                                        colorBarL1 = BarMaps.filter('.Map1:first');
                                                        colorBarL2 = BarMaps.filter('.Map2:first');
                                                        colorBarL3 = BarMaps.filter('.Map3:first');
                                                        colorBarL4 = BarMaps.filter('.Map4:first');
                                                        colorBarL5 = BarMaps.filter('.Map5:first');
                                                        colorBarL6 = BarMaps.filter('.Map6:first');
                                                        // create color pickers and maps
                                                        colorMap = new Slider(colorMapDiv,
                                                                {
                                                                    map:
                                                                            {
                                                                                width: images.colorMap.width,
                                                                                height: images.colorMap.height
                                                                            },
                                                                    arrow:
                                                                            {
                                                                                image: images.clientPath + images.colorMap.arrow.file,
                                                                                width: images.colorMap.arrow.width,
                                                                                height: images.colorMap.arrow.height
                                                                            }
                                                                });
                                                        colorMap.bind(mapValueChanged);
                                                        colorBar = new Slider(colorBarDiv,
                                                                {
                                                                    map:
                                                                            {
                                                                                width: images.colorBar.width,
                                                                                height: images.colorBar.height
                                                                            },
                                                                    arrow:
                                                                            {
                                                                                image: images.clientPath + images.colorBar.arrow.file,
                                                                                width: images.colorBar.arrow.width,
                                                                                height: images.colorBar.arrow.height
                                                                            }
                                                                });
                                                        colorBar.bind(colorBarValueChanged);
                                                        colorPicker = new ColorValuePicker(tbody, color.active, win.expandable && win.bindToInput ? win.input : null, win.alphaPrecision);
                                                        var hex = all != null ? all.hex : null,
                                                                preview = tbody.find('.Preview'),
                                                                button = tbody.find('.Button');
                                                        activePreview = preview.find('.Active:first').css({backgroundColor: hex && '#' + hex || 'transparent'});
                                                        currentPreview = preview.find('.Current:first').css({backgroundColor: hex && '#' + hex || 'transparent'}).bind('click', currentClicked);
                                                        setAlpha.call($this, currentPreview, Math.precision(color.current.val('a') * 100) / 255, 4);
                                                        okButton = button.find('.Ok:first').bind('click', okClicked);
                                                        cancelButton = button.find('.Cancel:first').bind('click', cancelClicked);
                                                        grid = button.find('.Grid:first');
                                                        setTimeout(
                                                                function ()
                                                                {
                                                                    setImg.call($this, colorMapL1, images.clientPath + 'Maps.png');
                                                                    setImg.call($this, colorMapL2, images.clientPath + 'Maps.png');
                                                                    setImg.call($this, colorMapL3, images.clientPath + 'map-opacity.png');
                                                                    setImg.call($this, colorBarL1, images.clientPath + 'Bars.png');
                                                                    setImg.call($this, colorBarL2, images.clientPath + 'Bars.png');
                                                                    setImg.call($this, colorBarL3, images.clientPath + 'Bars.png');
                                                                    setImg.call($this, colorBarL4, images.clientPath + 'Bars.png');
                                                                    setImg.call($this, colorBarL5, images.clientPath + 'bar-opacity.png');
                                                                    setImg.call($this, colorBarL6, images.clientPath + 'AlphaBar.png');
                                                                    setImg.call($this, preview.find('div:first'), images.clientPath + 'preview-opacity.png');
                                                                }, 0);
                                                        tbody.find('td.Radio input').bind('click', radioClicked);
                                                        // initialize quick list
                                                        if (color.quickList && color.quickList.length > 0)
                                                        {
                                                            var html = '';
                                                            for (i = 0; i < color.quickList.length; i++)
                                                            {
                                                                /* if default colors are hex strings, change them to color objects */
                                                                if ((typeof (color.quickList[i])).toString().toLowerCase() == 'string')
                                                                    color.quickList[i] = new Color({hex: color.quickList[i]});
                                                                var alpha = color.quickList[i].val('a');
                                                                var ahex = color.quickList[i].val('ahex');
                                                                if (!win.alphaSupport && ahex)
                                                                    ahex = ahex.substring(0, 6) + 'ff';
                                                                var quickHex = color.quickList[i].val('hex');
                                                                html += '<span class="QuickColor"' + (ahex && ' title="#' + ahex + '"' || '') + ' style="background-color:' + (quickHex && '#' + quickHex || '') + ';' + (quickHex ? '' : 'background-image:url(' + images.clientPath + 'NoColor.png)') + (win.alphaSupport && alpha && alpha < 255 ? ';opacity:' + Math.precision(alpha / 255, 4) + ';filter:Alpha(opacity=' + Math.precision(alpha / 2.55, 4) + ')' : '') + '">&nbsp;</span>';
                                                            }
                                                            setImg.call($this, grid, images.clientPath + 'bar-opacity.png');
                                                            grid.html(html);
                                                            grid.find('.QuickColor').click(quickPickClicked);
                                                        }
                                                        setColorMode.call($this, settings.color.mode);
                                                        color.active.bind(activeColorChanged);
                                                        $.isFunction(liveCallback) && color.active.bind(liveCallback);
                                                        color.current.bind(currentColorChanged);
                                                        // bind to input
                                                        if (win.expandable)
                                                        {
                                                            $this.icon = popup.parents('.Icon:first');
                                                            iconColor = $this.icon.find('.Color:first').css({backgroundColor: hex && '#' + hex || 'transparent'});
                                                            iconAlpha = $this.icon.find('.Alpha:first');
                                                            setImg.call($this, iconAlpha, images.clientPath + 'bar-opacity.png');
                                                            setAlpha.call($this, iconAlpha, Math.precision(((255 - (all != null ? all.a : 0)) * 100) / 255, 4));
                                                            iconImage = $this.icon.find('.Image:first').css(
                                                                    {
                                                                        backgroundImage: 'url(\'' + images.clientPath + images.picker.file + '\')'
                                                                    }).bind('click', iconImageClicked);
                                                            if (win.bindToInput && win.updateInputColor)
                                                                win.input.css(
                                                                        {
                                                                            backgroundColor: hex && '#' + hex || 'transparent',
                                                                            color: all == null || all.v > 75 ? '#000000' : '#ffffff'
                                                                        });
                                                            moveBar = tbody.find('.Move:first').bind('mousedown', moveBarMouseDown);
                                                            color.active.bind(expandableColorChanged);
                                                        }
                                                        else
                                                            show.call($this);
                                                    },
                                                    destroy =
                                                    function ()
                                                    {
                                                        container.find('td.Radio input').unbind('click', radioClicked);
                                                        currentPreview.unbind('click', currentClicked);
                                                        cancelButton.unbind('click', cancelClicked);
                                                        okButton.unbind('click', okClicked);
                                                        if (settings.window.expandable)
                                                        {
                                                            iconImage.unbind('click', iconImageClicked);
                                                            moveBar.unbind('mousedown', moveBarMouseDown);
                                                            $this.icon = null;
                                                        }
                                                        container.find('.QuickColor').unbind('click', quickPickClicked);
                                                        colorMapDiv = null;
                                                        colorBarDiv = null;
                                                        colorMapL1 = null;
                                                        colorMapL2 = null;
                                                        colorMapL3 = null;
                                                        colorBarL1 = null;
                                                        colorBarL2 = null;
                                                        colorBarL3 = null;
                                                        colorBarL4 = null;
                                                        colorBarL5 = null;
                                                        colorBarL6 = null;
                                                        colorMap.destroy();
                                                        colorMap = null;
                                                        colorBar.destroy();
                                                        colorBar = null;
                                                        colorPicker.destroy();
                                                        colorPicker = null;
                                                        activePreview = null;
                                                        currentPreview = null;
                                                        okButton = null;
                                                        cancelButton = null;
                                                        grid = null;
                                                        commitCallback = null;
                                                        cancelCallback = null;
                                                        liveCallback = null;
                                                        container.html('');
                                                        for (i = 0; i < List.length; i++)
                                                            if (List[i] == $this)
                                                                List.splice(i, 1);
                                                    },
                                                    images = settings.images, // local copies for YUI compressor
                                                    localization = settings.localization,
                                                    color =
                                                    {
                                                        active: (typeof (settings.color.active)).toString().toLowerCase() == 'string' ? new Color({ahex: !settings.window.alphaSupport && settings.color.active ? settings.color.active.substring(0, 6) + 'ff' : settings.color.active}) : new Color({ahex: !settings.window.alphaSupport && settings.color.active.val('ahex') ? settings.color.active.val('ahex').substring(0, 6) + 'ff' : settings.color.active.val('ahex')}),
                                                        current: (typeof (settings.color.active)).toString().toLowerCase() == 'string' ? new Color({ahex: !settings.window.alphaSupport && settings.color.active ? settings.color.active.substring(0, 6) + 'ff' : settings.color.active}) : new Color({ahex: !settings.window.alphaSupport && settings.color.active.val('ahex') ? settings.color.active.val('ahex').substring(0, 6) + 'ff' : settings.color.active.val('ahex')}),
                                                        quickList: settings.color.quickList
                                                    };
                                            $.extend(true, $this, // public properties, methods, and callbacks
                                                    {
                                                        commitCallback: commitCallback, // commitCallback function can be overridden to return the selected color to a method you specify when the user clicks "OK"
                                                        liveCallback: liveCallback, // liveCallback function can be overridden to return the selected color to a method you specify in live mode (continuous update)
                                                        cancelCallback: cancelCallback, // cancelCallback function can be overridden to a method you specify when the user clicks "Cancel"
                                                        color: color,
                                                        show: show,
                                                        hide: hide,
                                                        destroy: destroy // destroys this control entirely, removing all events and objects, and removing itself from the List
                                                    });
                                            List.push($this);
                                            setTimeout(
                                                    function ()
                                                    {
                                                        initialize.call($this);
                                                    }, 0);
                                        });
                            };
                    $.fn.jPicker.defaults = /* jPicker defaults - you can change anything in this section (such as the clientPath to your images) without fear of breaking the program */
                            {
                                window:
                                        {
                                            title: null, /* any title for the jPicker window itself - displays "Drag Markers To Pick A Color" if left null */
                                            effects:
                                                    {
                                                        type: 'slide', /* effect used to show/hide an expandable picker. Acceptable values "slide", "show", "fade" */
                                                        speed:
                                                                {
                                                                    show: 'slow', /* duration of "show" effect. Acceptable values are "fast", "slow", or time in ms */
                                                                    hide: 'fast' /* duration of "hide" effect. Acceptable values are "fast", "slow", or time in ms */
                                                                }
                                                    },
                                            position:
                                                    {
                                                        x: 'screenCenter', /* acceptable values "left", "center", "right", "screenCenter", or relative px value */
                                                        y: 'top' /* acceptable values "top", "bottom", "center", or relative px value */
                                                    },
                                            expandable: false, /* default to large static picker - set to true to make an expandable picker (small icon with popup) - set automatically when binded to input element */
                                            liveUpdate: true, /* set false if you want the user to have to click "OK" before the binded input box updates values (always "true" for expandable picker) */
                                            alphaSupport: false, /* set to true to enable alpha picking */
                                            alphaPrecision: 0, /* set decimal precision for alpha percentage display - hex codes do not map directly to percentage integers - range 0-2 */
                                            updateInputColor: true /* set to false to prevent binded input colors from changing */
                                        },
                                color:
                                        {
                                            mode: 'h', /* acceptabled values "h" (hue), "s" (saturation), "v" (value), "r" (red), "g" (green), "b" (blue), "a" (alpha) */
                                            active: new Color({ahex: '#ffcc00ff'}), /* acceptable values are any declared $.jPicker.Color object or string HEX value (e.g. #ffc000) WITH OR WITHOUT the "#" prefix */
                                            quickList: /* the quick pick color list */
                                                    [
                                                        new Color({h: 360, s: 33, v: 100}), /* acceptable values are any declared $.jPicker.Color object or string HEX value (e.g. #ffc000) WITH OR WITHOUT the "#" prefix */
                                                        new Color({h: 360, s: 66, v: 100}),
                                                        new Color({h: 360, s: 100, v: 100}),
                                                        new Color({h: 360, s: 100, v: 75}),
                                                        new Color({h: 360, s: 100, v: 50}),
                                                        new Color({h: 180, s: 0, v: 100}),
                                                        new Color({h: 30, s: 33, v: 100}),
                                                        new Color({h: 30, s: 66, v: 100}),
                                                        new Color({h: 30, s: 100, v: 100}),
                                                        new Color({h: 30, s: 100, v: 75}),
                                                        new Color({h: 30, s: 100, v: 50}),
                                                        new Color({h: 180, s: 0, v: 90}),
                                                        new Color({h: 60, s: 33, v: 100}),
                                                        new Color({h: 60, s: 66, v: 100}),
                                                        new Color({h: 60, s: 100, v: 100}),
                                                        new Color({h: 60, s: 100, v: 75}),
                                                        new Color({h: 60, s: 100, v: 50}),
                                                        new Color({h: 180, s: 0, v: 80}),
                                                        new Color({h: 90, s: 33, v: 100}),
                                                        new Color({h: 90, s: 66, v: 100}),
                                                        new Color({h: 90, s: 100, v: 100}),
                                                        new Color({h: 90, s: 100, v: 75}),
                                                        new Color({h: 90, s: 100, v: 50}),
                                                        new Color({h: 180, s: 0, v: 70}),
                                                        new Color({h: 120, s: 33, v: 100}),
                                                        new Color({h: 120, s: 66, v: 100}),
                                                        new Color({h: 120, s: 100, v: 100}),
                                                        new Color({h: 120, s: 100, v: 75}),
                                                        new Color({h: 120, s: 100, v: 50}),
                                                        new Color({h: 180, s: 0, v: 60}),
                                                        new Color({h: 150, s: 33, v: 100}),
                                                        new Color({h: 150, s: 66, v: 100}),
                                                        new Color({h: 150, s: 100, v: 100}),
                                                        new Color({h: 150, s: 100, v: 75}),
                                                        new Color({h: 150, s: 100, v: 50}),
                                                        new Color({h: 180, s: 0, v: 50}),
                                                        new Color({h: 180, s: 33, v: 100}),
                                                        new Color({h: 180, s: 66, v: 100}),
                                                        new Color({h: 180, s: 100, v: 100}),
                                                        new Color({h: 180, s: 100, v: 75}),
                                                        new Color({h: 180, s: 100, v: 50}),
                                                        new Color({h: 180, s: 0, v: 40}),
                                                        new Color({h: 210, s: 33, v: 100}),
                                                        new Color({h: 210, s: 66, v: 100}),
                                                        new Color({h: 210, s: 100, v: 100}),
                                                        new Color({h: 210, s: 100, v: 75}),
                                                        new Color({h: 210, s: 100, v: 50}),
                                                        new Color({h: 180, s: 0, v: 30}),
                                                        new Color({h: 240, s: 33, v: 100}),
                                                        new Color({h: 240, s: 66, v: 100}),
                                                        new Color({h: 240, s: 100, v: 100}),
                                                        new Color({h: 240, s: 100, v: 75}),
                                                        new Color({h: 240, s: 100, v: 50}),
                                                        new Color({h: 180, s: 0, v: 20}),
                                                        new Color({h: 270, s: 33, v: 100}),
                                                        new Color({h: 270, s: 66, v: 100}),
                                                        new Color({h: 270, s: 100, v: 100}),
                                                        new Color({h: 270, s: 100, v: 75}),
                                                        new Color({h: 270, s: 100, v: 50}),
                                                        new Color({h: 180, s: 0, v: 10}),
                                                        new Color({h: 300, s: 33, v: 100}),
                                                        new Color({h: 300, s: 66, v: 100}),
                                                        new Color({h: 300, s: 100, v: 100}),
                                                        new Color({h: 300, s: 100, v: 75}),
                                                        new Color({h: 300, s: 100, v: 50}),
                                                        new Color({h: 180, s: 0, v: 0}),
                                                        new Color({h: 330, s: 33, v: 100}),
                                                        new Color({h: 330, s: 66, v: 100}),
                                                        new Color({h: 330, s: 100, v: 100}),
                                                        new Color({h: 330, s: 100, v: 75}),
                                                        new Color({h: 330, s: 100, v: 50}),
                                                        new Color()
                                                    ]
                                        },
                                images:
                                        {
                                            clientPath: '/jPicker/images/', /* Path to image files */
                                            colorMap:
                                                    {
                                                        width: 256,
                                                        height: 256,
                                                        arrow:
                                                                {
                                                                    file: 'mappoint.gif', /* ColorMap arrow icon */
                                                                    width: 15,
                                                                    height: 15
                                                                }
                                                    },
                                            colorBar:
                                                    {
                                                        width: 20,
                                                        height: 256,
                                                        arrow:
                                                                {
                                                                    file: 'rangearrows.gif', /* ColorBar arrow icon */
                                                                    width: 20,
                                                                    height: 7
                                                                }
                                                    },
                                            picker:
                                                    {
                                                        file: 'picker.gif', /* Color Picker icon */
                                                        width: 25,
                                                        height: 24
                                                    }
                                        },
                                localization: /* alter these to change the text presented by the picker (e.g. different language) */
                                        {
                                            text:
                                                    {
                                                        title: 'Drag Markers To Pick A Color',
                                                        newColor: 'new',
                                                        currentColor: 'current',
                                                        ok: 'OK',
                                                        cancel: 'Cancel'
                                                    },
                                            tooltips:
                                                    {
                                                        colors:
                                                                {
                                                                    newColor: 'New Color - Press &ldquo;OK&rdquo; To Commit',
                                                                    currentColor: 'Click To Revert To Original Color'
                                                                },
                                                        buttons:
                                                                {
                                                                    ok: 'Commit To This Color Selection',
                                                                    cancel: 'Cancel And Revert To Original Color'
                                                                },
                                                        hue:
                                                                {
                                                                    radio: 'Set To &ldquo;Hue&rdquo; Color Mode',
                                                                    textbox: 'Enter A &ldquo;Hue&rdquo; Value (0-360&deg;)'
                                                                },
                                                        saturation:
                                                                {
                                                                    radio: 'Set To &ldquo;Saturation&rdquo; Color Mode',
                                                                    textbox: 'Enter A &ldquo;Saturation&rdquo; Value (0-100%)'
                                                                },
                                                        value:
                                                                {
                                                                    radio: 'Set To &ldquo;Value&rdquo; Color Mode',
                                                                    textbox: 'Enter A &ldquo;Value&rdquo; Value (0-100%)'
                                                                },
                                                        red:
                                                                {
                                                                    radio: 'Set To &ldquo;Red&rdquo; Color Mode',
                                                                    textbox: 'Enter A &ldquo;Red&rdquo; Value (0-255)'
                                                                },
                                                        green:
                                                                {
                                                                    radio: 'Set To &ldquo;Green&rdquo; Color Mode',
                                                                    textbox: 'Enter A &ldquo;Green&rdquo; Value (0-255)'
                                                                },
                                                        blue:
                                                                {
                                                                    radio: 'Set To &ldquo;Blue&rdquo; Color Mode',
                                                                    textbox: 'Enter A &ldquo;Blue&rdquo; Value (0-255)'
                                                                },
                                                        alpha:
                                                                {
                                                                    radio: 'Set To &ldquo;Alpha&rdquo; Color Mode',
                                                                    textbox: 'Enter A &ldquo;Alpha&rdquo; Value (0-100)'
                                                                },
                                                        hex:
                                                                {
                                                                    textbox: 'Enter A &ldquo;Hex&rdquo; Color Value (#000000-#ffffff)',
                                                                    alpha: 'Enter A &ldquo;Alpha&rdquo; Value (#00-#ff)'
                                                                }
                                                    }
                                        }
                            };
                })(jQuery, '1.1.6');